<template>
  <text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">{{
    text
  }}</text>
</template>

<script>
/**
 * Tag 标签
 * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
 * @tutorial https://ext.dcloud.net.cn/plugin?id=35
 * @property {String} text 标签内容
 * @property {String} size = [default|small|mini] 大小尺寸
 * 	@value default 正常
 * 	@value small 小尺寸
 * 	@value mini 迷你尺寸
 * @property {String} type = [default|primary|success｜warning｜error]  颜色类型
 * 	@value default 灰色
 * 	@value primary 蓝色
 * 	@value success 绿色
 * 	@value warning 黄色
 * 	@value error 红色
 * @property {Boolean} disabled = [true|false] 是否为禁用状态
 * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
 * @property {Boolean} circle = [true|false] 是否为圆角
 * @event {Function} click 点击 Tag 触发事件
 */

export default {
  name: "UniTag",
  emits: ["click"],
  props: {
    type: {
      // 标签类型default、primary、success、warning、error、royal
      type: String,
      default: "default",
    },
    size: {
      // 标签大小 normal, small
      type: String,
      default: "normal",
    },
    // 标签内容
    text: {
      type: String,
      default: "",
    },
    disabled: {
      // 是否为禁用状态
      type: [Boolean, String],
      default: false,
    },
    inverted: {
      // 是否为空心
      type: [Boolean, String],
      default: false,
    },
    circle: {
      // 是否为圆角样式
      type: [Boolean, String],
      default: false,
    },
    mark: {
      // 是否为标记样式
      type: [Boolean, String],
      default: false,
    },
    customStyle: {
      type: String,
      default: "",
    },
  },
  computed: {
    classes() {
      const { type, disabled, inverted, circle, mark, size, isTrue } = this;
      const classArr = [
        "uni-tag--" + type,
        "uni-tag--" + size,
        isTrue(disabled) ? "uni-tag--disabled" : "",
        isTrue(inverted) ? "uni-tag--" + type + "--inverted" : "",
        isTrue(circle) ? "uni-tag--circle" : "",
        isTrue(mark) ? "uni-tag--mark" : "",
        // type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
        isTrue(inverted) ? "uni-tag--inverted uni-tag-text--" + type : "",
        size === "small" ? "uni-tag-text--small" : "",
      ];
      // 返回类的字符串，兼容字节小程序
      return classArr.join(" ");
    },
  },
  methods: {
    isTrue(value) {
      return value === true || value === "true";
    },
    onClick() {
      if (this.isTrue(this.disabled)) return;
      this.$emit("click");
    },
  },
};
</script>

<style lang="scss" scoped>
$uni-primary: #2979ff !default;
$uni-success: #18bc37 !default;
$uni-warning: #f3a73f !default;
$uni-error: #e43d33 !default;
$uni-info: #8f939c !default;

$tag-default-pd: 4px 7px;
$tag-small-pd: 2px 5px;
$tag-mini-pd: 1px 3px;

.uni-tag {
  line-height: 14px;
  font-size: 12px;
  font-weight: 200;
  padding: $tag-default-pd;
  color: #fff;
  border-radius: 3px;
  background-color: $uni-info;
  border-width: 1rpx;
  border-style: solid;
  border-color: $uni-info;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */

  // size attr
  &--default {
    font-size: 12px;
  }

  &--default--inverted {
    color: $uni-info;
    border-color: $uni-info;
  }

  &--small {
    padding: $tag-small-pd;
    font-size: 12px;
    border-radius: 2px;
  }

  &--mini {
    padding: $tag-mini-pd;
    font-size: 12px;
    border-radius: 2px;
  }

  // type attr
  &--primary {
    background-color: $uni-primary;
    border-color: $uni-primary;
    color: #fff;
  }

  &--success {
    color: #fff;
    background-color: $uni-success;
    border-color: $uni-success;
  }

  &--warning {
    color: #fff;
    background-color: $uni-warning;
    border-color: $uni-warning;
  }

  &--error {
    color: #fff;
    background-color: $uni-error;
    border-color: $uni-error;
  }

  &--primary--inverted {
    color: $uni-primary;
    border-color: $uni-primary;
  }

  &--success--inverted {
    color: $uni-success;
    border-color: $uni-success;
  }

  &--warning--inverted {
    color: $uni-warning;
    border-color: $uni-warning;
  }

  &--error--inverted {
    color: $uni-error;
    border-color: $uni-error;
  }

  &--inverted {
    background-color: #fff;
  }

  // other attr
  &--circle {
    border-radius: 15px !important;
  }

  &--mark {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
  }

  &--disabled {
    opacity: 0.5;
    /* #ifdef H5 */
    cursor: not-allowed;
    /* #endif */
  }
}

.uni-tag-text {
  color: #fff;
  font-size: 14px;

  &--primary {
    color: $uni-primary;
  }

  &--success {
    color: $uni-success;
  }

  &--warning {
    color: $uni-warning;
  }

  &--error {
    color: $uni-error;
  }

  &--small {
    font-size: 12px;
  }
}
</style>
